<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="menu-container"
    :default-active="$route.path"
    text-color="#fff"
    :collapse="collapse"
    router
  >
    <el-menu-item index="/jiaiCalendar">
      <el-icon><Grid /></el-icon>
      <span class="activespan">即爱日历</span>
    </el-menu-item>
    <el-menu-item index="/scheduleSettings">
      <el-icon><Setting /></el-icon>
      <span class="activespan">计划设置</span>
    </el-menu-item>
    <el-menu-item index="/expenses">
      <el-icon><Money /></el-icon>
      <span class="activespan">花销管理</span>
    </el-menu-item>

    <el-menu-item index="/summaryReport">
      <el-icon><MessageBox /></el-icon>
      <span class="activespan">总结汇报</span>
    </el-menu-item>
    <el-menu-item index="/AINode">
      <el-icon><Notebook /></el-icon>
      <span class="activespan">AI笔记</span>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
let props = defineProps<{
  collapse: Boolean
}>()
</script>

<style lang="scss" scoped>
/*如果没有伸缩起来，默认宽度为200*/
.el-menu {
  width: 200px;
  height: 93vh;
  background-color: rgb(30, 30, 38);
}

.el-menu-item.is-active {
  color: #ffff;
  background-color: rgb(26, 115, 232);
}

.activespan {
  font-size: 18px !important;
  color: white;
  text-decoration: none;
}

.disactivesapn {
  font-size: 18px !important;
  color: white;
}
</style>
